<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <my-component1></my-component1>
    <hr>
    <my-component2></my-component2>
    <h3>{{ title }}</h3>
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">
    /* 组件 就是具有高度复用性的代码的集合*/
    /*1. 全局组件 2.局部组件*/
    /*组件：1.结构 2. 样式 3. 行为 4. 数据 5. 生命周期函数*/

    /*1.1 全局组件*/
    /*1.1.1 参数1：组件的名称，其实常说的标签名称，建议使用烤串法 a-b-c-d 1.1.2 组件对象 template*/
    Vue.component('my-component1', {
        created: function () {
            console.log('created 发送ajax请求，调用后台的接口获取数据');
        },
        updated: function () {
            console.log('updated 页面数据更新后执行');
        },
        data: function () {
            return {
                message: '我是全局组件的数据！',
            }
        },
        methods: {
            clickHandler: function (e) {
                console.log(e, e.target);
            }
        },
        template: '<div> <h1 style="color: #f00;">我是全局组件-{{ message }}</h1> <button @click="clickHandler">按钮</button> </div>'
    });

    //我们可以把组件定义时候的第二个参数单独提取出来，形成一个组件对象
    var componentObj = {
        created: function () {
            console.log('created 发送ajax请求，调用后台的接口获取数据');
        },
        updated: function () {
            console.log('updated 页面数据更新后执行');
        },
        data: function () {
            return {
                message: '我是局部组件的数据！',
            }
        },
        methods: {
            clickHandler: function (e) {
                console.log(e, e.target);
            }
        },
        template: '<div> <h1 style="color: #f00;">我是局部组件-{{ message }}</h1> <button @click="clickHandler">按钮</button> </div>'
    };

    var vm = new Vue({
        el: '#app',
        data: {
            title: 'vuejs 组件化'
        },
        /*在实例化 Vue 里面使用  components 定义的组件我们叫做局部组件*/
        components: {
            'my-component2': componentObj
        },
    })

</script>

</html>
